﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery添加和删除CSS类</title>
        <script src="js/jquery-3.6.1.min.js"></script>
		<style>
		div{
			width:200px;
			height:100px;
			margin:20px;
			padding:20px;
			border:1px solid gray;
			text-align:center;
		}
		.coral{
			background-color:coral;
		}
		.fontStyle{
			font-weight:bold;
			font-size:30px;
			font-style:italic;
			color:white;
		}
		button{
		    margin-left:20px;
		}
		</style>
    </head>
    <body>
        <h3>jQuery添加和删除CSS类</h3>
        <hr>
        <div>
		    Hello jQuery
		</div>
        <button id="btn1">为元素div添加CSS样式</button>
		<button id="btn2">为元素div删除CSS样式</button>
        <script>
            $(document).ready(function() {
				//按钮1的点击事件：为<div>元素添加CSS类
                $("#btn1").click(function() {
					$("div").addClass("coral fontStyle");
                });
				//按钮2的点击事件：为<div>元素删除CSS类
                $("#btn2").click(function() {
					$("div").removeClass("coral fontStyle");
                });
            });
        </script>
	</body>
</html>
